<template>
	<div>
		<el-row :gutter="20">
			<!-- 组织机构 -->
			<el-col :span="4">
				<el-input placeholder="输入关键字进行过滤" size="small" v-model="filterText">
				</el-input>
				<el-tree class="filter-tree" :data="data" :props="defaultProps" default-expand-all
					:filter-node-method="filterNode" @node-click="clickDeptNode" ref="tree">
				</el-tree>
			</el-col>
			<el-col :span="20">
				<!-- //查询表单数据 -->
				<el-form :inline="true" :model="queryForm" ref="queryForm" size="small" class="demo-form-inline "
					style="font-weight: 1000;">
					<el-form-item label="用户名称" prop="userName">
						<el-input v-model="queryForm.userName"></el-input>
					</el-form-item>
					<el-form-item label="手机号码" prop="userPhone">
						<el-input v-model="queryForm.userPhone"></el-input>
					</el-form-item>
					<el-form-item label="状态" prop="userState">
						<el-select v-model="queryForm.userState" placeholder="请选择">
							<el-option v-for="item in dicUserStateData" :key="item.dicDataId" :label="item.dicDataLabel"
								:value="item.dicDataVal">
								<span style="float: left">{{ item.dicDataLabel }}</span>
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="创建时间">
						<el-date-picker v-model="value1" type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss"
							range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
						</el-date-picker>
					</el-form-item>
					<span class="fr">
						<el-form-item>
							<el-button type="primary" @click="searchTableData()" size="mini" icon="el-icon-search">搜索
							</el-button>
							<el-button icon="el-icon-refresh" @click="resetQueryForm()" size="mini">重置</el-button>
						</el-form-item>
					</span>
				</el-form>
				<el-button type="primary" icon="el-icon-plus" size="mini" @click="addUserButtonClick()" plain>新增
				</el-button>
				<el-button type="success" icon="el-icon-edit" size="mini" @click="editUserButtonClick()" plain
					:disabled="editButtonState">修改</el-button>
				<el-button type="danger" icon="el-icon-delete" size="mini" @click="delUserButtonClick()" plain
					:disabled="delsButtonState">删除</el-button>
				<el-button type="info" icon="el-icon-upload2" size="mini" plain>导入</el-button>
				<el-button type="warning" icon="el-icon-download" size="mini" plain>导出</el-button>

				<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
					@selection-change="handleSelectionChange">
					<el-table-column type="selection" width="55">
					</el-table-column>
					<el-table-column prop="userAccount" label="登录名称">
					</el-table-column>
					<el-table-column prop="userName" label="用户名称" align="center">
					</el-table-column>
					<el-table-column prop="deptName" label="部门" align="center">
					</el-table-column>
					<el-table-column prop="userPhone" label="手机" align="center">
					</el-table-column>
					<el-table-column prop="userState" label="用户状态" align="center">
						<template slot-scope="scope">
							<el-switch v-model="scope.row.userState == 1 ? false : true" active-color="#13ce66"
								@change='changeStatus(scope.$index, scope.row)' inactive-color="#ff4949">
							</el-switch>
						</template>
					</el-table-column>
					<el-table-column prop="createTime" label="创建时间" align="center" show-overflow-tooltip>
					</el-table-column>
					<el-table-column label="操作" width="255" align="center">
						<template slot-scope="scope">
							<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
							<el-button type="warning" plain size="mini" @click="resetPwd(scope.$index, scope.row)">重置密码
							</el-button>
							<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除
							</el-button>
						</template>
					</el-table-column>
				</el-table>
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:current-page="queryForm.pageNum" :page-sizes="[2, 5, 8, 10]" :page-size="queryForm.pageSize"
					layout="->, total, sizes, prev, pager, next, jumper" :total="totalNum">
				</el-pagination>
			</el-col>
		</el-row>

		<!-- 新增对话框 -->
		<el-dialog title="添加用户" :visible.sync="addFormVisible" width="40%">
			<el-form :model="addUserForm" hide-required-asterisk ref="addUserForm" label-width="135px" size="small">
				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item label="用户昵称" label-width="80px">
							<el-input v-model="addUserForm.userAccount" placeholder="请输入用户昵称"></el-input>
						</el-form-item>
					</el-col>

					<el-col :span="12">
						<el-form-item label="归属部门" label-width="80px">
							<el-cascader ref="cascaderMallCatergory" v-model="addUserForm.departId" placeholder="请选择"
								:show-all-levels="false" class="wd" :options="data" :props="props">
							</el-cascader>
						</el-form-item>
					</el-col>
				</el-row>

				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item label="手机号码" label-width="80px">
							<el-input v-model="addUserForm.userPhone" placeholder="请输入手机号码"></el-input>
						</el-form-item>
					</el-col>

					<el-col :span="12">
						<el-form-item label="邮箱" label-width="80px">
							<el-input v-model="addUserForm.userEmail" placeholder="请输入邮箱"></el-input>
						</el-form-item>
					</el-col>
				</el-row>

				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item label="用户名称" label-width="80px">
							<el-input v-model="addUserForm.userName" placeholder="请输入用户名称"></el-input>
						</el-form-item>
					</el-col>

					<el-col :span="12">
						<el-form-item label="用户密码" label-width="80px">
							<el-input v-model="addUserForm.userPassword" placeholder="请输入用户密码" clearable show-password
								suffix-icon="el-icon-lock"></el-input>
						</el-form-item>
					</el-col>
				</el-row>

				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item label="用户性别" label-width="80px">
							<el-select v-model="addUserForm.userGender" placeholder="请选择用户性别" class="wd">
								<el-option v-for="item in dicUserGenderData" :key="item.dicDataId"
									:label="item.dicDataLabel" :value="item.dicDataVal">
									<span style="float: left">{{ item.dicDataLabel }}</span>
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="状态" label-width="80px">
							<el-radio-group v-model="addUserForm.userState">
								<el-radio :key="item.dicDataId" :label="item.dicDataVal"
									v-for="item in dicUserStateData">{{item.dicDataLabel}}</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item label="岗位" label-width="80px">
							<el-cascader v-model="addUserForm.posId" placeholder="请选择岗位" :show-all-levels="false"
								class="wd" :options="posData" :props="posProps">
							</el-cascader>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="角色" label-width="80px">
							<el-select v-model="addUserForm.roleId" placeholder="请选择角色" class="wd">
								<el-option v-for="item in roleList" :key="item.roleId" :label="item.roleName"
									:value="item.roleId">
									<span style="float: left">{{ item.roleName}}</span>
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-form-item label="备注" label-width="80px">
					<el-input type="textarea" :autosize="{ minRows: 3, maxRows: 10}" placeholder="请输入内容"
						v-model="addUserForm.remark">
					</el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="addFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="addUser()">确 定</el-button>
			</span>
		</el-dialog>
		<el-dialog title="编辑用户" :visible.sync="editFormVisible" width="40%">
			<el-form :model="editUserForm" hide-required-asterisk ref="editUserForm" label-width="135px">
				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item label="用户昵称" label-width="80px">
							<el-input v-model="editUserForm.userAccount" placeholder="请输入用户昵称"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="归属部门" label-width="80px">
							<el-cascader ref="cascaderMallCatergory" v-model="editUserForm.departId"
								:placeholder="editDeptPlaceholder" :show-all-levels="false" class="wd wd1"
								:options="data" :props="props">
							</el-cascader>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item label="手机号码" label-width="80px">
							<el-input v-model="editUserForm.userPhone" placeholder="请输入手机号码"></el-input>
						</el-form-item>
					</el-col>

					<el-col :span="12">
						<el-form-item label="邮箱" label-width="80px">
							<el-input v-model="editUserForm.userEmail" placeholder="请输入邮箱"></el-input>
						</el-form-item>
					</el-col>
				</el-row>

				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item label="用户名称" label-width="80px">
							<el-input v-model="editUserForm.userName" placeholder="请输入用户名称"></el-input>
						</el-form-item>
					</el-col>
				</el-row>

				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item label="用户性别" label-width="80px">
							<el-select v-model="editUserForm.userGender" placeholder="请选择用户性别" class="wd">
								<el-option v-for="item in dicUserGenderData" :key="item.dicDataId"
									:label="item.dicDataLabel" :value="item.dicDataVal">
									<span style="float: left">{{ item.dicDataLabel }}</span>
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>

					<el-col :span="12">
						<el-form-item label="状态" label-width="80px">
							<el-radio-group v-model="editUserForm.userState">
								<el-radio :key="item.dicDataId" :label="item.dicDataVal"
									v-for="item in dicUserStateData">{{item.dicDataLabel}}</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
				</el-row>

				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item label="岗位" label-width="80px">

							<el-cascader v-model="editUserForm.posId" :placeholder="editPosPlaceholder"
								:show-all-levels="false" class="wd wd1" :options="posData" :props="posProps">
							</el-cascader>
						</el-form-item><!-- {{posCode}} -->
					</el-col>

					<el-col :span="12">
						<el-form-item label="角色" label-width="80px">
							<el-select v-model="editUserForm.roleId" placeholder="请选择角色" class="wd">
								<el-option v-for="item in roleList" :key="item.roleId" :label="item.roleName"
									:value="item.roleId">
									<span style="float: left">{{ item.roleName}}</span>
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>

				<el-form-item label="备注" label-width="80px">
					<el-input type="textarea" :autosize="{ minRows: 3, maxRows: 10}" placeholder="请输入内容"
						v-model="editUserForm.remark">
					</el-input>
				</el-form-item>
			</el-form><!-- addFormVisible = false -->
			<span slot="footer" class="dialog-footer">
				<el-button @click="cancelEditUser()">取 消</el-button>
				<el-button type="primary" @click="editUser()">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {

			return {
				// 編輯弹出框的岗位Placeholder
				editPosPlaceholder: '',
				// 編輯弹出框的部门Placeholder
				editDeptPlaceholder: '',
				delsButtonState: true,
				editButtonState: true,
				// 修改的弹出框
				editFormVisible: false,
				// 角色集合
				roleList: [],

				//岗位选择结果
				posCode: [],
				props: {
					label: 'departName',
					value: 'departId',
					children: 'departList',
					emitPath: false,
				},
				posProps: {
					label: 'posName',
					value: 'posId',
					children: 'childs',
					emitPath: false,
					checkStrictly: true

				},

				// 新增数据框数据内容
				addUserForm: {
					userId: '',
					userAccount: '', //用户昵称
					userName: '',
					userPassword: '',
					userGender: '',
					userPhone: '',
					userEmail: '',
					userState: '',
					remark: '',
					posId: '',
					departId: '',
					roleId: ''
				},
				editUserForm: {
					userId: '',
					userAccount: '', //用户昵称
					userName: '',
					userPassword: '',
					userGender: '',
					userPhone: '',
					userEmail: '',
					userState: '',
					remark: '',
					posId: '',
					departId: '',
					roleId: ''
				},
				// 新增框的可见性
				addFormVisible: false,
				// tabledata中总的数量
				totalNum: 0,
				//表格中一次选中的多个数据
				multipleSelection: [],
				queryForm: {
					userName: '',
					userPhone: '',
					userState: null,
					startTime: '',
					endTime: '',
					pageNum: 1,
					pageSize: 10,
					departId: ''
				},
				tableData: [],
				value1: [],
				filterText: '',

				//树形部门展示
				data: [],
				//树形岗位展示
				posData: [],
				// 树形对照关系
				defaultProps: {
					id: 'departId',
					children: 'departList',
					label: 'departName',

				},
				// 用户状态下拉框选项
				dicUserStateData: [],
				// 新增性格下拉框选项
				dicUserGenderData: [],
				// 用户状态
				userStateVal: ''

			};
		},

		methods: {
			cancelEditUser() {
				this.editFormVisible = false;
				this.getUsers(this.queryForm);
			},
			editUser() {
				this.editFormVisible = false;
				this.$axios.put(`users`, this.editUserForm)
					.then(resp => {
						if (resp.code == 20000) {
							this.suc('修改成功');
						} else {
							this.error('修改失败');
						}
						this.getUsers(this.queryForm);
					});
			},
			// 点击删除按钮触发的事件
			delUserButtonClick() {
				let arr = [];
				let data = this.multipleSelection;
				for (let i = 0; i < data.length; i++) {
					arr[i] = data[i].userId;
				}
				this.$confirm('此操作将永久删除选中的用户数据, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$axios.delete(`users/delUsers/${arr}`)
						.then(resp => {
							this.getUsers(this.queryForm);
						});
					this.suc('删除成功!');
				}).catch(() => {
					this.info('已取消删除');
				});
			},
			// 修改按钮点击
			editUserButtonClick() {
				this.editFormVisible = true;
				this.editUserForm = this.multipleSelection[0];
				this.getOtherParam(this.editUserForm.userId);
			},
			handleEdit(index, row) {
				this.editFormVisible = true;
				this.editUserForm = row;
				this.getOtherParam(row.userId);
			},
			getOtherParam(userId) {
				this.$axios.get(`users/${userId}`)
					.then(resp => {
						this.editUserForm.userPassword = resp.data.userPassword;
						this.editDeptPlaceholder = resp.data.deptName;
						this.editPosPlaceholder = resp.data.posName;
					});
			},

			//重置新增表单 
			resetaddFrom() {
				this.addUserForm = {
					userId: '',
					userAccount: '', //用户昵称
					userName: '',
					userPassword: '',
					userGender: '',
					userPhone: '',
					userEmail: '',
					userState: '',
					remark: '',
					posId: '',
					departId: '',
					roleId: ''
				};
				this.posCode = [];
			},
			// 增加一个用户
			addUser() {
				this.addFormVisible = false;
				console.log(this.addUserForm);
				this.$axios.post('users', this.addUserForm)
					.then(resp => {
						// console.log(resp);
						if (resp.code == 20000) {
							this.suc('新增成功');
						} else {
							this.error('新增失败');
						}
						this.getUsers(this.queryForm);
					});
			},
			// 新增按钮触发的事件
			addUserButtonClick() {
				this.resetaddFrom();
				this.addFormVisible = true;
			},
			changeStatus(index, row) {
				this.dicUserStateData.forEach(data => {
					if (data.dicDataVal == row.userState) {
						this.userStateVal = data.remark;
						let temp;
						this.$confirm(`此用户当前状态为${data.remark}, 是否修改用户状态?`, '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning'
						}).then(() => {
							this.dicUserStateData.forEach(data => {
								if (data.dicDataVal != row.userState) {
									temp = data.dicDataVal;
								}
							})
							row.userState = temp;
							// 修改用户状态，将temp值传递到后端，用put方法
							axios.put('/users', row).then(resp => {
								if (resp.code == 20000) {
									this.suc('操作成功!');
								} else if (resp.code == 50000) {
									this.error('操作失败!');
								}
							})
						})
					}
				});
			},
			resetQuryForm() {
				this.queryForm = {
					userName: '',
					userPhone: '',
					userState: '',
					startTime: '',
					endTime: '',
					pageNum: 1,
					pageSize: 10,
					departId: ''
				}
			},
			// 重置查询框
			resetQueryForm() {
				this.value1 = [];
				this.resetQuryForm();
				this.getUsers(this.queryForm);
			},
			//点击树形节点触发的点击事件
			clickDeptNode(data) {
				this.queryForm.userName = '';
				this.queryForm.userPhone = '';
				this.queryForm.userName = '';
				this.queryForm.userState = '';
				this.queryForm.startTime = '';
				this.queryForm.endTime = '';
				this.queryForm.userName = '';
				this.queryForm.departId = data.departId;
				this.getUsers(this.queryForm);
			},
			//改变每页显示的条数
			handleSizeChange(val) {
				this.queryForm.pageSize = val;
				this.queryForm.pageNum = 1;
				this.getUsers(this.queryForm);
			},
			// 翻页
			handleCurrentChange(val) {
				this.queryForm.pageNum = val;
				this.getUsers(this.queryForm);
			},
			resetPwd(index, row) {
				this.$confirm(`此操作会将用户名为${row.userName}的用户密码置为abc123, 是否继续?`, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$axios.get(`/users/resetPwd/${row.userId}`)
						.then(resp => {
							if (resp.code == 20000) {
								this.suc('重置成功!');
							} else {
								this.error('重置失败!');
							}
							this.getUsers(this.queryForm);
						})
				}).catch(() => {
					this.info('已取消重置');
				});
			},

			handleDelete(index, row) {
				this.$confirm(`此操作会将用户名为${row.userName}的用户删除, 是否继续?`, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$axios.delete(`/users/${row.userId}`)
						.then(resp => {
							if (resp.code == 20000) {
								this.suc('删除成功!');
							} else {
								this.error('删除失败!');
							}
							this.getUsers(this.queryForm);
						})
				}).catch(() => {
					this.info('已取消删除');
				});
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
				if (val.length == 1) {
					this.editButtonState = false;
					this.delsButtonState = false;
				} else if (val.length > 1) {
					this.delsButtonState = false;
					this.editButtonState = true;
				} else {
					this.editButtonState = true;
					this.delsButtonState = true;
				}
			},

			filterNode(value, data) {
				if (!value) return true;
				return data.departName.indexOf(value) !== -1;
			},
			// 得到部门树形图
			getAlldept() {
				this.$axios.get("/users/AllDept")
					.then(resp => {
						if (resp.code == 20000) {
							this.data = resp.data;
						}
					})
			},
			//点击搜索触发的事件
			searchTableData() {
				this.queryForm.departId = '';
				if (this.value1 != null && this.value1 != undefined) {
					this.queryForm.startTime = this.value1[0];
					this.queryForm.endTime = this.value1[1];
				}
				this.getUsers(this.queryForm);
			},
			getUsers(searchData) {
				this.$axios.get("/users", {
						params: searchData
					})
					.then(resp => {
						this.tableData = resp.list;
						this.totalNum = resp.total;
					})
			}
		},
		created() {
			this.getDictItems("sys_user_hid").then(resp => {
				this.dicUserStateData = resp.data;
			});
			this.getDictItems("sys_user_sex").then(resp => {
				this.dicUserGenderData = resp.data;
			})
		},
		mounted() {
			this.getAlldept();
			this.getUsers(this.queryForm);
			this.$axios.get("/users/AllPos")
				.then(resp => {
					if (resp.code == 20000) {
						this.posData = resp.data;
					}
				});
			this.$axios.get("/roles/all")
				.then(resp => {
					if (resp.code == 20000) {
						this.roleList = resp.data;
					}
				})
		},
		watch: {
			filterText(val) {
				this.$refs.tree.filter(val);
			}
		}
	};
</script>

<style>
	.bg-purple {
		background: #d3dce6;
	}

	.bg-purple-light {
		background: #e5e9f2;
	}

	.grid-content {
		border-radius: 4px;
		min-height: 36px;
	}

	.fr {
		float: right;
	}

	.wd {
		width: 270px;
	}

	.wd1>.el-input>.el-input__inner::placeholder {
		color: rgba(0, 0, 0, 0.685) !important;
	}

	.el-input {
		width: 220px;
	}
</style>
